<template>
<div>
<!--  通知公告  -->
<!--  <el-page-header @back="goBack" title="行政" content="通知公告" ></el-page-header>-->
  <!--  分割线  -->
  <el-divider class="head"></el-divider>

  <!--    高级查询-->
  <el-row>
    <el-form :inline="true" :model="AdmNoticeForm" >

      <el-col :span="2.5">
        <el-form-item>
          <el-input v-model="AdmNoticeForm.title" placeholder="请输入标题"></el-input>
        </el-form-item>
      </el-col>

      <el-col :span="2.5">
        <el-form-item label="开始时间:">
          <el-date-picker
              v-model="AdmNoticeForm.StartNoticeNotificationtime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-DD HH:mm:ss"
              type="datetime"
              placeholder="选择开始时间">
          </el-date-picker>
        </el-form-item>
      </el-col>

      <el-col :span="2.5">
        <el-form-item label="结束时间:">
          <el-date-picker
              v-model="AdmNoticeForm.EndNoticeNotificationtime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-DD HH:mm:ss"
              type="datetime"
              placeholder="选择结束时间">
          </el-date-picker>
        </el-form-item>
      </el-col>

<!--      <el-col :span="8">-->
<!--        <el-form-item>-->
<!--        <el-date-picker-->
<!--            v-model="SEDate"-->
<!--            type="datetimerange"-->
<!--            :picker-options="pickerOptions"-->
<!--            range-separator="至"-->
<!--            start-placeholder="开始日期"-->
<!--            end-placeholder="结束日期"-->
<!--            value-format="yyyy-MM-dd HH-mm-ss"-->
<!--            align="right">-->
<!--        </el-date-picker>-->
<!--          <el-form-item>-->
<!--      </el-col>-->

      <el-col :span="2">
        <el-form-item>
          <el-button type="primary" plain @click="queryAdmNotice" icon="el-icon-search">检索</el-button>
        </el-form-item>
      </el-col>

    </el-form>

  </el-row>


  <el-table
      :data="AdmNoticeData"
      style="width: 100%">
    <el-table-column
        prop="title"
        label="标题">
    </el-table-column>
    <el-table-column
        prop="noticeNotificationtime"
        label="时间">
    </el-table-column>
    <el-table-column
        label="操作">

      <template slot-scope="slot">
        <el-button type="text" @click="queryAdmNoticeByid(slot.row.id)">查看</el-button>

      </template>

    </el-table-column>
  </el-table>

  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[2, 4, 6, 8]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageData.total">
  </el-pagination>

</div>
</template>

<script>
export default {
  name: "AdmNotice",
  data() {
    return {
      SEDate: [], // 起止日期
      // pickerOptions: {
        // shortcuts: [{
        //   text: '最近一周',
        //   onClick(picker) {
        //     const end = new Date();
        //     const start = new Date();
        //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        //     picker.$emit('pick', [start, end]);
        //   }
        // }, {
        //   text: '最近一个月',
        //   onClick(picker) {
        //     const end = new Date();
        //     const start = new Date();
        //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        //     picker.$emit('pick', [start, end]);
        //   }
        // }]
      // },
      AdmNoticeData: [], // 公告表格数据
      AdmNoticeForm: {
        pageCur: "1",//页码
        pageSize: "2",//每页显示多少
        StartNoticeNotificationtime: "",// 通知开启时间
        EndNoticeNotificationtime: "", // 通知结束时间
      },// 高查表单数据
      AdmNoticeByidData: {
        pageCur: "1",//页码
        pageSize: "2",//每页显示多少
      }, // 详情数据
      pageData:{},// 存放分页数据
    }
  },
  // watch: {
  //   SEDate: function (val) {
  //     if (val !== null) {
  //       this.AdmNoticeForm.StartNoticeNotificationtime = val[0]
  //       this.AdmNoticeForm.EndNoticeNotificationtime = val[1]
  //     } else {
  //       this.AdmNoticeForm.StartNoticeNotificationtime = null
  //       this.AdmNoticeForm.EndNoticeNotificationtime = null
  //     }
  //   }
  // },
    created() {
      this.queryAdmNotice()
    },
    methods: {
      goBack() {
        this.$router.go(-1)
      },// 返回按钮
      queryAdmNotice() {

        const loading = this.$loading({
          lock: true,
          text: '正在载入...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

        // console.log(this.AdmNoticeForm)
        this.$http.get("admNotice", {params: this.AdmNoticeForm})
            .then(res => {
              setTimeout(() => {
                loading.close();
              });
              this.AdmNoticeData = res.data.data.list
              this.pageData = res.data.data
            })
            .catch()
      },
      queryAdmNoticeByid(id) { // 查看公告详情
       this.$router.push({name:"queryadmnoticebyid",params:{id:id}})
      },
      handleSizeChange(val){
        this.AdmNoticeForm.pageSize=val
        this.queryAdmNotice();
      },
      handleCurrentChange(val){
        this.AdmNoticeForm.pageCur=val
        this.queryAdmNotice()

      },

    }

}
</script>

<style scoped>

.head{
  margin-top: 10px ;
  margin-bottom: 15px ;
  height: 2px;
}

</style>